<template>
  <!-- 角色管理 -->
  <div>
    <!-- 头部搜索框 -->
    <el-card class="box-card">
      <el-form :inline="true">
        <el-form-item>
          <el-input size="small" placeholder="用户名" v-model="roleName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 底部表格 -->
    <el-card class="box-card">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" size="small">添加</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" size="small">批量删除</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table border style="width: 100%" :data="roleDate">
        <el-table-column
          type="selection"
          min-width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column type="index" width="80" label="序号" align="center">
        </el-table-column>
        <el-table-column
          width="500"
          label="角色名称"
          align="center"
        >
          <template #default="{row}">
            <template 
              v-if='row.isEdit'
            >
              <el-input v-model="row.roleName"/>
              <el-button icon="el-icon-edit-outline" type="primary" 
              @click="clearRoleName(row)"
              >取消</el-button>
            </template>
            <span v-else>{{row.roleName}}</span>
          </template>
        </el-table-column>
        <!-- 底部表格操作部分 -->
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          min-width="100px"
        >
          <template v-slot="{row}">
            <el-button type="info" icon="el-icon-warning" size="small" />
            <el-button
              type="primary"
              icon="el-icon-edit-outline"
              size="small"
              @click="row.isEdit=true"
              title="修改" 
            />
            <el-button type="primary" icon="el-icon-check" size="small" title="确定"  />
            <el-button type="danger" icon="el-icon-delete" size="small"  title="删除" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="1000">
    </el-pagination> -->
    </el-card>
  </div>
</template>

<script>
// 引入请求
import { getRoleListApi } from "@/api/acl/role";

export default {
  name: "Role",
  data() {
    return {
      roleName:'',
      username: "",
      searchUsername: "",
      page: 1, // 当前页码
      limit: 3, // 每页数量
        total: 0,
        roleDate:[]
    };
  },
  mounted(){
    this.getRole()
  },
  methods: {
    handleCurrentChange(size) {
      this.paramsState.page = size;
      this.getUsers(size);
    },
    //获取角色列表
    async getRole() {
      const result = await getRoleListApi({page:this.page,limit:this.limit},this.roleName);
      console.log('列表结果',result);
      this.roleDate = result.data.items.map(item => {
        item.isEdit = false
        item.historyRoleName = item.roleName
        return item
      })
      console.log(this.roleDate);
      this.total = result.data.total
      },
      //判断取消表单的逻辑
      clearRoleName(row){
        this.$message.success('取消成功');
        if(row.roleName === row.historyRoleName)return row.isEdit = false
        row.roleName = row.historyRoleName
        row.isEdit = false
      }
  },
  
}
</script>

<style lang="scss">
.box {
  padding: 10px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>